<!DOCTYPE html>
<html lang="en">
<head>
<body>
<h1>基本的DOM操作</h1>

<input type="text" id="msg" onchange="msg=this.value">
<div id="show"></div>

<button onclick="msg=123;document.getElementById('msg').value=msg;">修改msg值</button>
<script>
    var msg = ""

    setInterval(function(){
        document.getElementById('showq').innerHTML = msg
    }, 1000)
</script>

<pre>
var button = document.getElementById('button1');
button.onclick = plusOne
//java写法
button.addEventListener('click', plusOne);

function plusOne(){
    //获取元素对象
    var div = document.getElementById('msg');
    //获取元素显示值
    var num = parseInt(div.innerHTML);
    //累加
    num ++;
    //覆盖原来的值
    div.innerHTML = num;

}


//查找结点API
document.getElementById
document.getElementsByClassName
document.getElementsByTagName
//子节点
node.childNodes
node.firstChild
node.lastChild
//父节点
node.parentNode
//兄弟节点
node.nextSibling
node.previousSibling

//修改，设置属性
innerHTML
id
className
setAttribute()
getAttribute()

//添加
node = document.createElement("div")
father.appendChild(node)

//删除
father.removeChild(node)

//交互事件
鼠标、键盘、加载

事件属性
onclick ondblclick onmousemove onmouseover
onkeyDown  onkeypress ...
</pre>


</body>
</html>

